import React, { Component } from 'react';
import * as service from  "../api/index"

import "../styles/Dizhi.scss"
import {
    Form,
    Input,
    Button,
    Cascader,
    TextArea,
    NavBar,
    Switch,
    Toast

} from 'antd-mobile'







class Dizhi extends Component {

    formRef = React.createRef()
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            setVisible: false,
            visible1: false,
            dizhi: [],
            name:"" ,   //保存姓名
            phone:"",   //保存电话
            province:"" ,  //省
            city:"" , //市
            county:""  , // 区
            addressDetail:"",  //详细地址 
            isDefault:false ,  //是否设置为默认地址
            id:"",
            options: [
                {
                    label: '陕西',
                    value: '陕西',
                    children: [
                        {
                            label: '西安',
                            value: '西安',
                            children: [
                                {
                                    label: '灞桥区',
                                    value: '灞桥区',
                                },
                                {
                                    label: '高新区',
                                    value: '高新区',
                                },
                                {
                                    label: '莲湖区',
                                    value: '莲湖区',
                                    disabled: true,
                                },
                            ],
                        },
                        {
                            label: '安康',
                            value: '安康',
                            children: [
                                {
                                    label: '汉滨区',
                                    value: '汉滨区',
                                },
                                {
                                    label: '高新区',
                                    value: '高新区',
                                    disabled: true,
                                },
                                {
                                    label: '岚皋',
                                    value: '岚皋',
                                },
                            ],
                        },
                        {
                            label: '宁波',
                            value: '宁波',
                            children: [
                                {
                                    label: '海曙区',
                                    value: '海曙区',
                                },
                                {
                                    label: '江北区',
                                    value: '江北区',
                                },
                                {
                                    label: '镇海区',
                                    value: '镇海区',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '安徽',
                    value: '安徽',
                    children: [
                        {
                            label: '合肥',
                            value: '合肥',
                            children: [
                                {
                                    label: '包河区',
                                    value: '包河区',
                                },
                                {
                                    label: '蜀山区',
                                    value: '蜀山区',
                                },
                                {
                                    label: '瑶海区',
                                    value: '瑶海区',
                                },
                            ],
                        },
                        {
                            label: '芜湖',
                            value: '芜湖',
                            children: [
                                {
                                    label: '镜湖区',
                                    value: '镜湖区',
                                },
                                {
                                    label: '弋江区',
                                    value: '弋江区',
                                },
                                {
                                    label: '湾沚区',
                                    value: '湾沚区',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: '江苏',
                    value: '江苏',
                    children: [
                        {
                            label: '南京',
                            value: '南京',
                            children: [
                                {
                                    label: '玄武区',
                                    value: '玄武区',
                                },
                                {
                                    label: '秦淮区',
                                    value: '秦淮区',
                                },
                                {
                                    label: '建邺区',
                                    value: '建邺区',
                                },
                            ],
                        },
                        {
                            label: '苏州',
                            value: '苏州',
                            children: [
                                {
                                    label: '虎丘区',
                                    value: '虎丘区',
                                },
                                {
                                    label: '吴中区',
                                    value: '吴中区',
                                },
                                {
                                    label: '相城区',
                                    value: '相城区',
                                },
                            ],
                        },
                    ],
                },
            ]

        }
    }
   componentDidMount(){
         this.setState({id:this.props.location.state.id})
   }


    fanhui(){
        this.props.history.go(-1)
    }
   //姓名
    xingming(value){
       this.setState({name:value})

    }
      
   //电话
   phone(value){
    this.setState({phone:value})


   }

   //拿到省市区，然后分别设置
   dizhi2233(val){
    this.state .province=val[0]
    this.state .city=val[1]
    this.state .county=val[2]

     this.setState({dizhi:val.join("/")})
   }

   //详细地址
   xiangxi(val){
       this.state.addressDetail=val
       
   }


   //是否为默认地址
   isDefault(){
       console.log("77")
   }

   //更新地址
   async update(){
    var res=await service.address_update({addressid:this.state.id ,userid:localStorage.getItem('userid'),name:this.state.name,tel:this.state.phone,province:this.state.province,city:this.state.city,county:this.state.county,addressDetail:this.state.addressDetail,isDefault:this.state.isDefault})
      if(res.data.code==200){
        Toast.show({
            content: '更新成功',
            afterClose: () => {
              console.log('after')
            },
          })
     }
    
}
     //添加地址
     async add(){
        var res= await service.address_add({userid:localStorage.getItem('userid'),name:this.state.name,tel:this.state.phone,province:this.state.province,city:this.state.city,county:this.state.county,addressDetail:this.state.addressDetail,isDefault:this.state.isDefault} )
        if(res.data.code==200){
            Toast.show({
                content: '添加完成',
                afterClose: () => {
                  console.log('after')
                },
              })
         }
    }
    //返回上一级

    render() {
        return (
            <div className='dizhi'>
                <div className='header'>  <NavBar onBack={()=>{this.fanhui()}}>标题</NavBar></div>
                <Form
                    layout='horizontal'
                    ref={this.formRef}
                    footer={
                        <Button block type='submit' color='primary' size='large' onClick={()=>{ this.state.id?this.update():this.add()}}>
                            提交
                        </Button>
                    }
                >
                    <Form.Header>地址</Form.Header>
                    <Form.Item
                        name='name'
                        label='姓名'
                        rules={[{ required: true, message: '姓名不能为空' }]}
                    >
                        <Input onChange={(e)=>{
                            this.xingming(e)
                        }} placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item
                        name='phone'
                        label='电话'
                        rules={[{ required: true, message: '电话不能为空' }]}
                   
                    >
                        <Input   onChange={(e)=>{this.phone(e)}} placeholder='请输入电话' />
                    </Form.Item>

                    <>
                            <div
                                className='dizhi'
                                onClick={() => {
                                    this.setState({ Visible: true })
                                }}
                            >
                            <span className='span1'>地址</span>  <span className='span2'>  {this.state.dizhi} </span>
                            </div>
                        
                            {/* <CascaderView options={options} onChange={(value)=>{this.handelonchange(value)}}/> */}
                        <Cascader
                            options={this.state.options}
                            visible={this.state.Visible}
                            onClose={() => {
                                this.setState({ Visible: false })

                            }}
                            onSelect={(val) => {
                            this.dizhi2233(val)
                            }}
                        />
                    </>
                    <Form.Item name='address' label='地址' help='详情地址'>
                        <TextArea
                            placeholder='请输入地址'
                            maxLength={100}
                            rows={2}
                            showCount
                            onChange={(e)=>{this.xiangxi(e)}} 
                        />
                    </Form.Item>

                    <Form.Item
                        name='delivery'
                        label='送货上门'
                        childElementPosition='right'
                        onClick={()=>{this.isDefault()}}
                    >
                        <Switch />
                    </Form.Item>
                </Form>

            </div>
        );
    }
}

export default Dizhi;